<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/15
  Time: 11:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>首页--汽车租赁系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/public.css" media="all" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui_ext/dtree/font/dtreefont.css">
</head>
<body class="childrenBody">
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
</fieldset>
<form class="layui-form" method="post" id="searchFrm">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">身份证号:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="identity" id="identity" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入身份证号" style="height: 30px;border-radius: 10px">
            </div>
        </div>

        <div class="layui-inline" style="text-align: center">
            <button type="button"
                    class="layui-btn layui-btn-normal layui-icon layui-icon-search layui-btn-radius layui-btn-sm"
                    lay-submit  lay-filter="doSearch" style="margin-top: 4px">查询
            </button>
            <button type="reset"
                    class="layui-btn layui-btn-warm layui-icon layui-icon-refresh layui-btn-radius layui-btn-sm"
                    style="margin-top: 4px">重置
            </button>
        </div>
    </div>

</form>
<!-- 搜索条件结束 -->
<table id="carTable" lay-filter="carTable"></table>


<script id="barCar" type="text/html">
    <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="rent">汽车出租</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs layui-btn-radius" lay-event="showImg">查看大图</a>
</script>




<!-- 添加和修改的弹出层-->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv">
    <form class="layui-form layui-row layui-col-space10" lay-filter="dataFrm" id="dataFrm">
        <div class="layui-col-md12 layui-col-xs12">
            <div class="layui-form-item magb0">
                <div class="layui-inline">
                    <label class="layui-form-label">起租时间:</label>
                    <div class="layui-input-block" style="padding: 5px">
                        <input type="text" name="begindate1" id="begindate1" autocomplete="off" class="layui-input"
                               lay-verify="required"
                               placeholder="请输入租车时间" style="height: 30px;border-radius: 10px">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">换车时间:</label>
                    <div class="layui-input-block" style="padding: 5px">
                        <input type="text" name="returndate1" id="returndate1" autocomplete="off" class="layui-input"
                               placeholder="请输入换车时间" style="height: 30px;border-radius: 10px">
                    </div>
                </div>
            </div>

            <div class="layui-form-item magb0">
                <label class="layui-form-label">出租单号:</label>
                <div class="layui-input-block" style="padding: 5px">
                    <input type="text" name="rentid" id="rentid" autocomplete="off" class="layui-input"
                           placeholder="请输入出租单号" style="height: 30px;border-radius: 10px">
                </div>
            </div>

            <div class="layui-form-item magb0">
                <label class="layui-form-label">身份证号:</label>
                <div class="layui-input-block" style="padding: 5px">
                    <input type="text" name="identity" id="identity1" autocomplete="off" class="layui-input"
                           placeholder="请输入身份证号" style="height: 30px;border-radius: 10px">
                </div>
            </div>
            <div class="layui-form-item magb0">
                <div class="layui-inline">
                    <label class="layui-form-label">车牌号:</label>
                    <div class="layui-input-block" style="padding: 5px">
                        <input type="text" name="carnumber" id="carnumber" class="layui-input" lay-verify="required"
                               placeholder="请输入车牌号" style="height: 30px;border-radius: 10px">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">出租价格:</label>
                    <div class="layui-input-block" style="padding: 5px">
                        <input type="text" name="price" id="price" class="layui-input" lay-verify="required|number"
                               placeholder="请输入车辆出租价格" style="height: 30px;border-radius: 10px">
                    </div>
                </div>
            </div>

            <div class="layui-form-item magb0">
                <label class="layui-form-label">操作员:</label>
                <div class="layui-input-block" style="padding: 5px">
                    <input type="text" name="openname" id="openname" autocomplete="off" class="layui-input"
                           placeholder="请输入操作员" style="height: 30px;border-radius: 10px">
                </div>
            </div>
            <div class="layui-form-item magb0">
                <div class="layui-input-block" style="text-align: center;padding-right: 120px">
                    <button type="button"
                            class="layui-btn layui-btn-normal layui-btn-md layui-icon layui-icon-release layui-btn-radius"
                            lay-filter="doSubmit" lay-submit>提交
                    </button>
                    <button type="reset"
                            class="layui-btn layui-btn-warm layui-btn-md layui-icon layui-icon-refresh layui-btn-radius">
                        重置
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<%--查看大图弹出的层开始--%>
<div id="viewCarImageDiv" style="display: none;text-align: center">
    <img alt="车辆图片" width="700px" height="310px" id="view_carimg">
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/index.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/cache.js"></script>

<script>
    var tab;
    layui.use(['table','form','jquery','layer'],function(){
        var table=layui.table;
        var form = layui.form;
        var $ =layui.jquery;
        var layer = layui.layer;


        form.on('submit(doSearch)',function(data){
            $.post("${pageContext.request.contextPath}/rentInfo/checkRent",{"identity":data.field.identity},function (r) {
                if(r.code>0){
                    $("#identity1").val(data.field.identity)
                    tab = table.render({
                        elem: '#carTable',
                        url: "${pageContext.request.contextPath}/rentInfo/rentInfoShow",
                        cellMinWidth: 30,
                        page: {limit: 5, limits: [5, 10, 15, 20]},
                        // toolbar: '#toolbarCar',//开启头部工具栏，并为其绑定左侧模板
                        cols: [[
                            {type: 'checkbox', fixed: 'left'},
                            {field: 'carnumber', width: 150, title: '车牌号', sort: true}
                            ,{field: 'cartype', width: 80, title: '车辆类型', sort: true}
                            , {field: 'color', width: 80, title: '车辆颜色', sort: true}
                            , {field: 'price', width: 80, title: '车辆价格'}
                            ,{field: 'rentprice', width: 110, title: '出租价格', sort: true}
                            ,{field: 'deposit', width: 80, title: '押金', sort: true}
                            ,{field: 'isrenting', width: 80, title: '是否出租', sort: true,templet: function (data) {
                                    return data.isrenting == 1 ? '已出租' : '未出租'
                                }}
                            ,{field: 'description', width: 130, title: '描述', sort: true}
                            ,{field: 'createtime', width: 120, title: '创建时间', sort: true}
                            , {fixed: 'right', title: '操作', toolbar: '#barCar'}
                        ]]
                    })
                }
            })
        })
        var index;
        table.on('tool(carTable)', function (obj) {
            var data = obj.data
            if (obj.event == "rent") { // 出租
                carRent(data)
            }else if(obj.event=="showImg"){
                //查看大图
                showImg(data)
            }
        })
        <%--function carRent(car){--%>
            <%--$.post("${pageContext.request.contextPath}/rentInfo/generateInfo",function(r){--%>
                <%--index = layer.open({--%>
                    <%--type: 1,--%>
                    <%--title: '出租车辆',--%>
                    <%--content: $("#saveOrUpdateDiv"),--%>
                    <%--area: ['800px', '440px'],--%>
                    <%--success: function () {--%>
                     <%--$("#begindate").text(r.data.createtime);--%>
                     <%--$("#rentid").text(r.data.rentNumber);--%>
                     <%--$("#identity1").text(r.data.identity);--%>
                     <%--$("#openname").text(r.data.realname);--%>
                     <%--$("#carnumber").text(car.carnumber);--%>
                     <%--$("#price").text(car.rentprice);--%>
                    <%--}--%>
                <%--})--%>
            <%--})--%>
        <%--}--%>
        function carRent(car){
            if(car.isrenting==1){
                layer.msg("该车已出租")
                return false;
            }
            $.post("${pageContext.request.contextPath}/rentInfo/generateInfo",function(r){
               index=layer.open({
                   type: 1,
                   title:'汽车出租',
                   content:$("#saveOrUpdateDiv"),
                   area: ['800px', '440px'],
                   success:function() {
                       $("#begindate1").val(r.data.createtime)
                       $("#rentid").val(r.data.rentNumber)
                       $("#openname").val(r.data.user.realname)
                       $("#identity1").val($("#identity").val())
                       $("#carnumber").val(car.carnumber)
                       $("#price").val(car.rentprice)
                   }
               })
                // $("#identity1").val(r.data.identity)
                // $("#")
            })

        }
        form.on('submit(doSubmit)',function(r){
            var param = $("#dataFrm").serialize()
            layer.confirm("确定要提交该数据么", function (r) {
                $.get("${pageContext.request.contextPath}/rentInfo/addRentInfo?"+param,function (r) {
                    layer.msg(r.msg)
                    layer.close(index)
                    tab.reload()
                })
            })
            return false;
        })

        function showImg(data){
            index=layer.open({
                type: 1,
                title:'查看大图',
                content:$("#viewCarImageDiv"),
                area: ['800px', '440px'],
                success:function(){
                    $("#view_carimg").attr("src",data.carimg)
                }
            })
        }
    })

</script>


</body>
</html>
